<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="申请人" prop="userId">
        <el-select v-model="formData.userId" placeholder="请选择申请人（可输入姓名搜索）" clearable filterable remote :remote-method="userRemoteMethod" :loading="userLoading" :style="{width: '100%'}">
          <el-option v-for="(item, index) in userOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="社团" prop="clubId">
        <el-select v-model="formData.clubId" placeholder="请选择社团" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in clubOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="岗位" prop="recruitmentId">
        <el-select v-model="formData.recruitmentId" placeholder="请选择岗位" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in recruitmentOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="简历内容" prop="resumeContent">
        <el-input v-model="formData.resumeContent" type="textarea" placeholder="请输入简历内容" :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addApplication } from '@/api/club/application'
import { listInfo } from '@/api/club/info'
import { listRecruitment } from '@/api/club/recruitment'
import { listUser } from '@/api/system/user'
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        userId: undefined,
        clubId: undefined,
        recruitmentId: undefined,
        resumeContent: '',
        status: 0,
        remark: '',
      },
      rules: {
        userId: [{ required: true, message: '请选择申请人', trigger: 'change' }],
        clubId: [{ required: true, message: '请选择社团', trigger: 'change' }],
        recruitmentId: [{ required: true, message: '请选择岗位', trigger: 'change' }],
        resumeContent: [{ required: true, message: '请输入简历内容', trigger: 'blur' }],
        remark: [],
      },
      clubOptions: [],
      recruitmentOptions: [],
      userOptions: [],
      userLoading: false,
    }
  },
  computed: {},
  watch: {
    'formData.clubId'(val) {
      this.loadRecruitmentOptions()
    }
  },
  created() {
    this.loadClubOptions()
    this.loadRecruitmentOptions()
    this.loadInitialUsers()
    const qs = (this.$route && this.$route.query) ? this.$route.query : Object.fromEntries(new URLSearchParams(window.location.search))
    const cid = Number(qs.clubId)
    if (cid) {
      this.formData.clubId = cid
      this.loadRecruitmentOptions()
    }
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        addApplication(this.formData).then(() => {
          this.$modal.msgSuccess('新增成功')
          this.resetForm()
        })
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    loadClubOptions() {
      const query = { pageNum: 1, pageSize: 999 }
      listInfo(query).then(res => {
        const rows = res.rows || []
        this.clubOptions = rows.map(item => ({ label: item.name || `社团${item.id}`, value: item.id }))
      })
    },
    loadRecruitmentOptions() {
      const query = { pageNum: 1, pageSize: 999, clubId: this.formData.clubId }
      listRecruitment(query).then(res => {
        const rows = res.rows || []
        this.recruitmentOptions = rows.map(item => ({ label: item.position || `岗位${item.id}`, value: item.id }))
      })
    },
    loadInitialUsers() {
      const query = { pageNum: 1, pageSize: 20 }
      listUser(query).then(res => {
        const rows = res.rows || []
        this.userOptions = rows.map(u => ({ label: u.nickName || u.userName || `用户${u.userId}`, value: u.userId }))
      })
    },
    userRemoteMethod(query) {
      if (!query) {
        this.loadInitialUsers()
        return
      }
      this.userLoading = true
      const params = { pageNum: 1, pageSize: 20, userName: query }
      listUser(params).then(res => {
        const rows = res.rows || []
        this.userOptions = rows.map(u => ({ label: u.nickName || u.userName || `用户${u.userId}`, value: u.userId }))
        this.userLoading = false
      }).catch(() => {
        this.userLoading = false
      })
    },
  }
}

</script>
<style>
</style>
